<template>
  <div class="com-page">
    <div class="title" @mouseleave="handleOut">
      <span @click="handleSelect">▌ {{ title.text }}</span>
      <span
        :style="selectCon ? 'display: none' : 'display: inline-block'"
        class="iconfont"
        @click="handleSelect"
      >
        &#xe6ed;
      </span>
      <span
        :style="selectCon ? 'display: inline-block' : 'display: none'"
        class="iconfont"
        @click="handleSelect"
      >
        &#xe6ef;
      </span>
      <div
        v-for="item in type"
        :key="item.key"
        class="type"
        :class="selectCon ? 'select-con' : 'nonSelected'"
      >
        <div class="selectItem" @click="handleClick(item)">
          &nbsp;&nbsp;&nbsp;{{ item.text }}
        </div>
      </div>
    </div>
    <div ref="container" class="com-container" />
  </div>
</template>

<script>
import { setEcharts, setEchartOptions } from '@/api/echarts/line.js'
export default {
  data() {
    return {
      common: '', // x轴的数据
      type: '', // title下拉菜单列表
      commodity: '', // 商品销量趋势
      map: '', // 地区销量趋势
      seller: '', // 商家销量趋势
      value: '',
      title: '',
      selectCon: false
    }
  },
  computed: {
    initValue() {
      console.log(this.type)
      return this.type[2]
    }
  },
  async mounted() {
    await this.initCharts()
    this.setEcharts()
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 获取echarts的数据
    async initCharts() {
      const { data } = await this.$http.get('/trend')
      // const res = await this.$http.get('/trend')
      // console.log(res)
      this.common = data.common
      this.type = data.type
      for (const item in this.type) {
        if (this.type[item].key === 'commodity') {
          this.title = this.type[item]
        }
      }
      this.commodity = data.commodity
      this.map = data.map
      this.seller = data.seller
    },
    // 下拉图标选择
    handleSelect() {
      this.selectCon = !this.selectCon
    },
    handleOut() {
      this.selectCon = false
    },
    // item 点击触发
    handleClick(e) {
      this.title = e
      this.selectCon = false
      this.setEcharts()
    },
    // 渲染echarts图表 折线图
    setEcharts() {
      switch (this.title.key) {
        case 'commodity':
          setEcharts(
            this.$refs.container,
            this.common.month,
            this.commodity.data
          )
          break
        case 'map':
          setEcharts(this.$refs.container, this.common.month, this.map.data)
          break
        case 'seller':
          setEcharts(this.$refs.container, this.common.month, this.seller.data)
          break
      }
    },
    // 屏幕分辨率 改变时 option 变化
    screenAdapter() {
      // const titleFontSize = (this.$refs.container.offsetWidth / 100) * 3.6
      const adapterOption = {}
      setEchartOptions(this.$refs.container, adapterOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  position: absolute;
  z-index: 2;
  width: 300px;
  left: 10%;
  top: 5%;
  color: white;
  font-size: 30px;
  .iconfont {
    font-size: 30px;
    margin-left: 25px;
  }
  span:hover {
    cursor: pointer;
  }
  .select-con {
    display: block;
  }
  .nonSelected {
    display: none;
  }
  .type {
  }
  .selectItem {
    margin-top: 5px;
    &:hover {
      cursor: pointer;
      background-color: rgba($color: #000000, $alpha: 0.3);
      color: #b9e5f9;
    }
  }
}
</style>
